<script setup lang="ts">
import contentConfig from '../common/config/content'
import searchConfig from '../common/config/search'
import usePage from '@/hooks/usePage'
import type { IObject, IOperatData } from '@/hooks/usePage'

const {
  searchRef,
  contentRef,
  handleQueryClick,
  handleResetClick,
  handleAddClick,
  handleExportClick,
  handleSearchClick,
} = usePage()
// 编辑
async function handleEditClick(row: IObject) {
  console.log(row)
}
// 其他操作列
function handleOperatClick(data: IOperatData) {
  console.log(data)
  if (data.name === 'reset_pwd') {
    ElMessageBox.confirm(
      '确认下架吗？',
      '下架',
      { type: 'warning' },
    ).then(() => {
      // 发送网络请求
      ElMessage.success('下架成功')
    })
  }
}
</script>

<template>
  <div class="app-container">
    <!-- 搜索 -->
    <page-search
      ref="searchRef"
      :search-config="searchConfig"
      @query-click="handleQueryClick"
      @reset-click="handleResetClick"
    />

    <!-- 列表 -->
    <page-content
      ref="contentRef"
      :content-config="contentConfig"
      @add-click="handleAddClick"
      @edit-click="handleEditClick"
      @export-click="handleExportClick"
      @search-click="handleSearchClick"
      @operat-click="handleOperatClick"
    >
      <template #status="scope">
        <el-tag :type="scope.row[scope.prop] == 1 ? 'success' : 'info'">
          {{ scope.row[scope.prop] == 1 ? "启用" : "禁用" }}
        </el-tag>
      </template>
    </page-content>
  </div>
</template>
